<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2：动态待办列表</title>
    <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        .todo-container {
            max-width: 600px;
            margin: 3rem auto;
            padding: 0 1rem;
        }

        .todo-header {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
        }

        .add-todo {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .todo-input {
            flex: 1;
            padding: 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
        }

        .todo-input:focus {
            border-color: #2563eb;
        }

        .add-btn {
            padding: 0.8rem 1.5rem;
            background-color: #22c55e;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn:hover {
            background-color: #16a34a;
        }

        .todo-list {
            list-style: none;
            gap: 0.8rem;
            display: flex;
            flex-direction: column;
        }

        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s;
        }

        .todo-item:hover {
            background-color: #f9fafb;
        }

        .todo-text {
            font-size: 1rem;
            color: #333;
            cursor: pointer;
            transition: color 0.3s;
        }

        /* 完成状态样式 */
        .todo-text.completed {
            color: #6b7280;
            text-decoration: line-through;
        }

        .delete-btn {
            padding: 0.5rem 0.8rem;
            background-color: #ef4444;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .delete-btn:hover {
            background-color: #dc2626;
        }

        .todo-count {
            margin-top: 1.5rem;
            text-align: right;
            font-size: 0.9rem;
            color: #6b7280;
        }
    </style>
</head>
<body>
    <div class="todo-container">
        <h1 class="todo-header">待办事项列表</h1>

        <!-- 添加待办区域 -->
        <div class="add-todo">
            <input type="text" class="todo-input" id="todoInput" placeholder="请输入待办事项...">
            <button class="add-btn" id="addTodoBtn">
                <i class="fa fa-plus"></i> 添加
            </button>
        </div>

        <!-- 待办列表 -->
        <ul class="todo-list" id="todoList"></ul>

        <!-- 数量统计 -->
        <div class="todo-count" id="todoCount">
            当前待办数量：0
        </div>
    </div>

    <script>
        // 1. 获取DOM元素
        const todoInput = document.getElementById('todoInput');
        const addTodoBtn = document.getElementById('addTodoBtn');
        const todoList = document.getElementById('todoList');
        const todoCount = document.getElementById('todoCount');

        // 2. 初始化待办数量
        let todoNum = 0;

        // 3. 更新待办数量统计
        function updateTodoCount() {
            todoCount.textContent = `当前待办数量：${todoNum}`;
        }

        // 4. 添加待办事项
        function addTodo() {
            const todoText = todoInput.value.trim(); // 去除空格
            if (!todoText) return; // 空内容不添加

            // 创建待办项元素
            const todoItem = document.createElement('li');
            todoItem.className = 'todo-item';

            // 创建待办文本
            const todoTextEl = document.createElement('span');
            todoTextEl.className = 'todo-text';
            todoTextEl.textContent = todoText;

            // 创建删除按钮
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'delete-btn';
            deleteBtn.innerHTML = '<i class="fa fa-trash"></i> 删除';

            // 组装待办项
            todoItem.appendChild(todoTextEl);
            todoItem.appendChild(deleteBtn);
            todoList.appendChild(todoItem);

            // 清空输入框
            todoInput.value = '';

            // 更新数量
            todoNum++;
            updateTodoCount();

            // 5. 绑定删除事件
            deleteBtn.addEventListener('click', () => {
                todoList.removeChild(todoItem);
                // 如果是未完成状态，删除时减少数量
                if (!todoTextEl.classList.contains('completed')) {
                    todoNum--;
                    updateTodoCount();
                }
            });

            // 6. 绑定切换完成状态事件（点击文本）
            todoTextEl.addEventListener('click', () => {
                todoTextEl.classList.toggle('completed');
                // 完成时减少数量，取消完成时增加数量
                if (todoTextEl.classList.contains('completed')) {
                    todoNum--;
                } else {
                    todoNum++;
                }
                updateTodoCount();
            });
        }

        // 7. 绑定添加按钮点击事件
        addTodoBtn.addEventListener('click', addTodo);

        // 8. 支持回车键添加
        todoInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                addTodo();
            }
        });
    </script>
</body>
</html>